<!-- 薪资排行 -->
<template>
	<view class="page">
		<u-navbar title="编辑资料"></u-navbar>
		<view class="form-box">
			<view class="photo-box">
				<view class="card-title">
					<view>头像</view>
				</view>
				<view class="avatar-box" @click="chooseImage">
					<view class="avatar">
						<u-avatar :src="vuex_user.avatar" size="180"></u-avatar>
						<view class="avatar-icon">
							<u-icon color="#fff" name="camera"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="photo-box">
				<view class="card-title">
					<view>相册</view>
					<view class="card-title-tip">(最多可上传8张)</view>
				</view>
				<u-upload :file-list="photoList" width="136" height="136" :max-size="5 * 1024 * 1024" max-count="8" :action="uploadAction" :header="header" @on-success="onSuccess" @on-remove="onRemove"></u-upload>
			</view>
			<view class="form-page">
				<view class="form-item">
					<view class="form-label">昵称</view>
					<view v-if="vuex_user.nickName == ''" class="form-set" @click="nickname">去设置</view>
					<view v-else class="form-text" @click="nickname">
						{{vuex_user.nickName}}
					</view>
				</view>
				<u-line></u-line>
				<view class="form-item">
					<view class="form-label">性别</view>
					<view v-if="vuex_user.sex == ''" class="form-set" @click="actionSheetShow = true">去设置</view>
					<view v-else class="form-text">
						<view v-if="vuex_user.sex == 0">男</view>
						<view v-else>女</view>
					</view>
				</view>
				<u-line></u-line>
				<view class="form-item">
					<view class="form-label">年龄</view>
					<view v-if="vuex_user.age == ''" class="form-set" @click="ageShow = true">去设置</view>
					<view v-else class="form-text" @click="ageShow = true">{{vuex_user.age}}</view>
				</view>
				<u-line></u-line>
				<view class="form-item" v-if="vuex_user.isAuth == '1'">
					<view class="form-label">微信号</view>
					<view v-if="vuex_user.wechat == '' || vuex_user.wechat == null" class="form-set" @click="wechatShow = true">去设置</view>
					<view v-else class="form-text" @click="wechatShow = true">
						{{vuex_user.wechat}}
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">位置</view>
					<view class="form-set" @click="handerChooseLocation">去设置</view>
				</view>
				<u-line></u-line>
				<view class="form-item">
					<view class="form-label">签名</view>
					<view v-if="vuex_user.signName == ''" class="form-set" @click="signname">去设置</view>
					<view v-else class="form-text" @click="signname">
						{{vuex_user.signName}}
					</view>
				</view>
				<u-line></u-line>
				<view class="form-item mh">
					<view class="form-label">职业</view>
					<view v-if="vuex_user.profession == null" class="form-set" @click="profession">去设置</view>
					<view v-else class="form-text" @click="profession">
						{{vuex_user.profession}}
					</view>
				</view>
				<u-line></u-line>
				<view class="form-item mh">
					<view class="form-label">兴趣爱好</view>
					<view v-if="vuex_user.hobby == null" class="form-set" @click="hobby">去设置</view>
					<view v-else class="form-text" @click="hobby">
						{{vuex_user.hobby}}
					</view>
				</view>
				<u-line></u-line>
				<view class="form-item mh">
					<view class="form-label">自我介绍</view>
					<view v-if="vuex_user.introduce == null" class="form-set" @click="introduce">去设置</view>
					<view v-else class="form-text" @click="introduce">
						{{vuex_user.introduce}}
					</view>
				</view>
			</view>
		</view>
		<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
		
		<u-popup mode="bottom" v-model="ageShow">
			<view class="content">
				<scroll-view scroll-y="true" style="height: 300rpx;">
					<view>
						<view class="age-label">年龄：{{age}}</view>
						<u-slider v-if="ageShow" min="12" max="80" v-model="age"></u-slider>
					</view>
				</scroll-view>
				<view class="confrim-btn">
					<u-button type="primary" @click="updateAge">确定</u-button>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="wechatShow" mode="bottom" border-radius="14">
			<wechat-pop @cannel="wechatShow = false"></wechat-pop>
		</u-popup>
			
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import wechatPop from "@/pages/me/wechat.vue";	//微信号
	export default {
		components: {
			wechatPop
		},
		data() {
			var token = 'Bearer ' + uni.getStorageSync('token');
			var action = this.website.baseUrl + '/system/user/profile/avatar';
			var uploadAction = this.website.baseUrl + '/oss/oss/upload';
			return {
				age: 18,
				formData: {},
				action: action,
				uploadAction: uploadAction,
				header: {
					'Authorization': token
				},
				ageShow: false,
				wechatShow: false,
				actionSheetShow: false,
				actionSheetList: [
					{
						text: '男',
						value: '0',
					},
					{
						text: '女',
						value: '1',
					},
				],
				photoList: [],
				fileList: [],
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		computed: {
			...mapState(['vuex_user','chat_flag']),
		},
		methods: {
			getUserInfo() {
				if(this.vuex_user.albums != null && this.vuex_user.albums != ''){
					var albumList = this.vuex_user.albums.split(',');
					this.fileList = albumList;
					for(var i=0;i<albumList.length;i++){
						var album = albumList[i];
						var file = {url: album};
						this.photoList.push(file);
					}
				}
			},
			nickname() {
				this.$u.route({
					url: 'packgeMine/pages/me/nickname',
				});
			},
			wechat() {
				this.$u.route({
					url: 'packgeMine/pages/me/wechat',
				});
			},
			signname() {
				this.$u.route({
					url: 'packgeMine/pages/me/signname',
				});
			},
			profession() {
				this.$u.route({
					url: 'packgeMine/pages/me/profession',
				});
			},
			hobby() {
				this.$u.route({
					url: 'packgeMine/pages/me/hobby',
				});
			},
			handerChooseLocation () {
			  uni.chooseLocation({
			    success: (res) => {
					this.updateLocation(res.latitude, res.longitude);
			    },
			    fail: function (err) {
			        console.log('取消按钮', err)
			    }
			  })
			},
			introduce() {
				this.$u.route({
					url: 'packgeMine/pages/me/introduce',
				});
			},
			updateAvatar(image) {
				uni.uploadFile({
					url: this.action,
					filePath: image.path,
					name: 'avatarfile',
					formData: this.formData,
					header: this.header,
					success: res => {
						var data = res.data;
						data = JSON.parse(data);
						if(data.code == 200){
							this.$u.toast('修改成功');
							var user = this.vuex_user;
							user.avatar = data.imgUrl;
							this.$store.commit('setUser', user);
						}else{
							this.$u.toast(data.msg);
						}
					},
					fail: e => {
						this.$u.toast('上传失败');
					}
				});
			},
			//选照片 or 拍照
			chooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sourceType: ['album', 'camera'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							uni.getImageInfo({
								src: res.tempFilePaths[i],
								success: (image) => {
									this.updateAvatar(image);
								}
							});
						}
					}
				});
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				var sex = this.actionSheetList[index].value;
				this.$u.put('/system/user/profile',{
					sex: sex
				}).then(res => {
					var user = this.vuex_user;
					user.sex = sex;
					this.$store.commit('setUser', user);
				})
			},
			updateLocation(lat,lng) {
				this.$u.put('/system/user/profile',{
					lat: lat,
					lon: lng,
				}).then(res => {
					this.$u.toast('位置修改成功');
				})
			},
			updateAge() {
				this.$u.put('/system/user/profile',{
					age: this.age
				}).then(res => {
					var user = this.vuex_user;
					user.age = this.age;
					this.$store.commit('setUser', user);
					this.ageShow = false;
				})
			},
			onSuccess(e) {
				if(e.code == 200){
					var url = e.data;
					this.fileList.push(url);
					var albums = this.fileList.join(",");
					this.$u.put('/system/user/profile',{
						albums: albums
					}).then(res => {
						this.$u.toast('图片上传成功');
						this.getImageList(albums);
					});
				}else{
					this.$u.toast(e.msg);
				}
			},
			getImageList(albums) {
				var albumList = albums.split(',');
				var user = this.vuex_user;
				user.albums = albums;
				this.$store.commit('setUser', user);
				this.$store.commit('setAlbums', albumList);
			},
			onRemove(index) {
				this.fileList.splice(index, 1); 
				var albums = this.fileList.join(",");
				this.$u.put('/system/user/profile',{
					albums: albums
				}).then(res => {
					this.$u.toast('图片删除成功');
					this.getImageList(albums);
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f9f8f8;
	}
	.slot-wrap {
		padding-left: 10px;
	}
	.form-box {
		padding: 15px;
	}
	.avatar {
		position: relative;
	}
	.avatar-box {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		border-radius: 10px;
	}
	.avatar-icon {
		position: absolute;
		bottom: 20rpx;
		right: 0px;
		background: #303133;
		padding: 10rpx 12rpx;
		border-radius: 100px;
	}
	.form-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 0;
	}
	.form-label {
		font-size: 32rpx;
		width: 100px;
	}
	.form-text {
		font-size: 30rpx;
		color: #817e7e;
		display: flex;
		justify-content: flex-end;
		flex: 1;
		line-height: 15px;
	}
	.form-set {
		font-size: 30rpx;
		color: #929292bd;
		display: flex;
		justify-content: flex-end;
		flex: 1;
		line-height: 15px;
	}
	.mh {
		min-height: 100px;
	}
	.form-page {
		padding: 15px;
		background-color: #fff;
		margin-top: 15px;
		border-radius: 10px;
	}
	.photo-box {
		background-color: #fff;
		border-radius: 10px;
		padding: 15px;
		margin-bottom: 15px;
	}
	.card-title {
		font-size: 32rpx;
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}
	.card-title-tip {
		margin-left: 5px;
		font-size: 28rpx;
		color: #817e7e;
	}
	.content {
		padding: 15px;
	}
	.age-label {
		font-size: 14px;
		margin-bottom: 15px;
	}
</style>
